<template>
  <!--企业新增弹层start -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
  >
    <el-row>
      <el-form ref="queryForm" :inline="true" :rules="rules" :model="filters" label-width="80px" class="dialog-form">
        <el-form-item label="信用代码" prop="creditCodePic">
          <el-input
            v-model="filters.creditCodePic"
            size="medium"
            class="serach-person"
            placeholder="请输入信用代码"
          />
        </el-form-item>
      </el-form>
      <!--操作按钮-->
      <el-row :gutter="10" class="button-wrap">
        <el-col :span="1.5">
          <el-button v-clickForbidden icon="el-icon-search" size="middle" @click="handleQuery">搜索</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button v-clickForbidden icon="el-icon-refresh" size="middle" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        class="table-list"
        :row-style="rowClass"
        :row-key="getRowKeys"
        size="mini"
        @selection-change="handleSelectionChange"
        @row-click="rowChecked"
      >
        <el-table-column type="selection" width="38" :reserve-selection="true" />
        <el-table-column prop="name" :show-overflow-tooltip="true" label="企业名称" min-width="150" align="center" />
        <el-table-column prop="sysEnterpriseType" :formatter="formartType" label="企业类型" min-width="80" align="center" />
        <el-table-column prop="creditCodePic" label="信用代码" :show-overflow-tooltip="true" min-width="150" align="center" />
        <el-table-column prop="contacts" label="联系人" min-width="80" align="center" />
        <el-table-column prop="phone" label="联系电话" min-width="150" align="center" />
        <el-table-column prop="checkStatus" label="审核状态" min-width="80" align="center">
          <template slot-scope="{row}">
            <span v-if="row.checkStatus === '0'">审核成功</span>
            <span v-if="row.checkStatus === '1'">审核失败</span>
            <span v-if="row.checkStatus === '2'">未审核</span>
            <span v-if="row.checkStatus === '3'">已初始化</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button type="primary" size="medium" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getEnterpriseByCreditCode, addEnterpriseByCreditCode } from '@/api/supplier/customerSupplier'
export default {
  props: {
    typeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 筛选企业
      filters: {
        creditCodePic: ''
      },
      rules: {
        creditCodePic: [{ required: true, message: '信用代码不能为空', trigger: 'blur' }]
      },
      getRowKeys(row) { // 分页记录功能
        return row.id
      },
      // 企业列表
      tableData: [],
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      multipleSelection: [], // 多选框选中数组
      selectRow: [] // 高亮数组
    }
  },
  methods: {
    // 筛选人员
    getList() {
      getEnterpriseByCreditCode(this.filters.creditCodePic).then(res => {
        if (res.data) {
          this.tableData = [res.data]
        }
      })
    },
    // 添加企业
    async submitForm() {
      if (!this.multipleSelection.length) {
        this.msgWarning('请选择企业')
        return
      }
      const { id, sysEnterpriseType } = this.multipleSelection[0]
      await addEnterpriseByCreditCode({ companyId: id, companyTypeId: sysEnterpriseType })
      this.cancel()
      this.$parent.getList()
    },
    /* 新增/编辑弹层 start*/
    // 新增/编辑
    handleAdd(title) {
      this.dialogTitle = title
      this.dialogVisible = true
    },
    formartType(row) {
      if (JSON.stringify(row) === '{}') return
      const item = this.typeOptions.find(item => {
        return item.typeNum === row.sysEnterpriseType
      })
      return item && item.typeName
    },
    // 多选框选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      // 单选
      if (this.choice === '单选') {
        if (val.length > 1) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(val.pop())
        }
      }
      // 高亮
      this.selectRow = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item))
        })
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return {
          'background-color': 'rgba(185,221,249,.75)'
        }
      }
    },
    // 点击行时,选框选中
    rowChecked(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.tableData = []
      this.$refs.multipleTable.clearSelection()
      this.emptyForm()
    },
    // 搜索方法
    handleQuery() {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          this.filters.pageNum = 1
          this.getList()
        }
      })
    },
    emptyForm() {
      this.resetForm('queryForm')
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.emptyForm()
      this.handleQuery()
      this.echoIds = null
    }
    /* 新增弹层 end*/
  }
}
</script>

<style scoped>
</style>
